<!-- **************************************** 评论区域 **************************************** -->
<div class="title" id="comment">
  <h3>评论<small>抢沙发</small></h3>
</div>

{empty name="user"}
<div id="respond">
  <div class="comment-signarea">
    <h3 class="text-muted">您还没有登录哦！</h3>
    <p>
      <a href="https://admin.soyul.cn/#/admin/login" class="btn btn-primary login" target="_blank"
        rel="nofollow">登录</a>&nbsp;&nbsp;
      <a href="https://admin.soyul.cn/#/admin/register" class="btn btn-default register" target="_blank"
        rel="nofollow">注册</a>
    </p>
  </div>
</div>
{/empty}

<!-- ********** 评论框 ********** -->
<div id="respond">
  <div class="comment">
    <div class="comment-title">
      {empty name="user.hport"}
      <img class="avatar" src="/static/main/noavatar_small.gif" />
      {else /}
      <img class="avatar" src="{$user.hport}" />
      {/empty}
    </div>
    <div>
      <input class="comment_input comment_name" placeholder="姓名或昵称 (必填)" id="comment_name" name="nick" maxlength="15"
        tabIndex="1" value="{$user.account ?? $touristInfo.unick}" />
      <input class="comment_input comment_email" placeholder="邮箱(必填,将保密)以便回复您" id="comment_email" name="email"
        maxlength="50" tabIndex="2" value="{$user.email ?? $touristInfo.email}" />
      <input class="comment_input comment_url" placeholder="网站或博客 http://xxxx" id="comment_url" name="website"
        maxlength="50" tabIndex="3" value="{$user.website ?? $touristInfo.website}" />
    </div>
    <div class="comment-box">
      <textarea placeholder="您的评论可以一针见血" name="comment-textarea" id="comment-textarea" class="comment-textarea"
        cols="100%" rows="3" tabIndex="4"></textarea>
      <div class="comment-ctrl">
        <span class="emotion sss"><img src="https://www.liangjucai.com/Index/images/face/5.png" width="20"
            height="20" />表情</span>
        <div class="comment-prompt"><i class="fa fa-spin fa-circle-o-notch"></i><span
            class="comment-prompt-text">评论正在提交中...请稍后</span></div>
        <div class="comment-success" id="comok"><i class="fa fa-check"></i><span
            class="comment-prompt-text">评论提交成功...</span></div>
        <div class="comment-success" id="cinfo"><i class="fa fa-close"></i><span class="comment-prompt-text"></span>
        </div>
        <button type="button" name="comment-submit" class="comment-submit" tabindex="5" articleid="1" data-id="0"
          onclick="comment(0,this)">评论</button>
      </div>
    </div>
  </div>
</div>
<!-- ********** 评论框 ********** -->
<!-- ********** 评论内容 ********** -->

<style>
  .w-94 {
    width: 94% !important;
  }

  .f-m-l {
    font-size: 12px;
    margin-left: 1px;
  }

  .admin_controller>a {
    color: red;
  }

  .com_del:hover {
    color: black;
  }
</style>
<div id="postcomments">
  {php}$count=count($comment);{/php}
  {volist name="comment" id="value"}
  <ol class="commentlist">
    <li class="comment-content" id="colm_{$value.id}">
      <div class="comment-hf">
        <div><span class="comment-f">#{$count}</span></div>
        <div><a class="comm_hf_btn" data-id="{$value.id}" onclick="reply({$value.id},this,1)">回复</a></div>
      </div>
      <div class="comment-avatar">
        {empty name="$value.hport"}
        <span class="avatar">{$value.unick|mb_substr=0,1}</span>
        {else /}
        <img class="avatar" src="{$value.hport}" style="background-color:transparent;" />
        {/empty}
      </div>
      <div class="comment-main">
        <p><a href="#" target="_blank">{$value.unick}</a><span class="time">({$value.time|date='Y/m/d H:i:s'})</span>
          {notempty name="isAdmin"}
          <span class="admin_controller">
            <a class="com_del" href="{:url('comment/update',array('id'=>$value['id']))}" target="_blank">修改</a>&nbsp;
            <a class="com_del" onclick="json_comment_delete({$value.id},this)">删除</a>
          </span>
          {/notempty}
          <br /><span class="useressay">{$value.essay}</span></p>
      </div>
    </li>
    {present name="value['zclass']"}
    {volist name="value.zclass" id="vol"}
    <li class="comment-content comm_list w-94" id="colm_{$vol.id}">
      <div class="comment-hf">
        <div><span class="comment-f">&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
        <div><a class="comm_hf_btn" data-id="{$vol.id}" onclick="reply({$vol.id},this,0)">回复</a></div>
      </div>
      <div class="comment-avatar">
        {empty name="$vol.hport"}
        <span class="avatar">{$vol.unick|mb_substr=0,1}</span>
        {else /}
        <img class="avatar" src="{$vol.hport}" style="background-color:transparent;" />
        {/empty}
      </div>
      <div class="comment-main">
        <p><a href="#" target="_blank">{$vol.unick}</a>
          <span class="f-m-l">回复</span>
          <a class="f-m-l" href="#" target="_blank">@ {$vol.sayto}</a>
          <span class="time">({$vol.time|date='Y/m/d H:i:s'})</span>
          {notempty name="isAdmin"}
          <span class="admin_controller">
            <a class="com_del" href="{:url('index/comment_update',array('id'=>$vol['id']))}"
              target="_blank">修改</a>&nbsp;
            <a class="com_del" onclick="json_comment_delete({$vol.id},this)">删除</a>
          </span>
          {/notempty}
          <br /><span class="useressay">{$vol.essay}</span>
        </p>
      </div>
    </li>
    {/volist}
    {/present}
  </ol>
  {php}$count--;{/php}
  {/volist}
</div>
{//*******************评论内容*******************}






{//回复按钮点击与添加评论框}
<div id="respond" name="reply_model" style="display:none;">
  <div class="comment">
    <div class="comment-title">
      {empty name="user.hport"}
      <img class="avatar" src="/static/main/noavatar_small.gif" />
      {else /}
      <img class="avatar" src="{$user.hport}" />
      {/empty}
    </div>
    <div>
      <input class="comment_input comment_name" placeholder="姓名或昵称 (必填)" id="comment_name" name="nick" maxlength="15"
        tabIndex="1" value="{$user.account ?? $touristInfo.unick}" />
      <input class="comment_input comment_email" placeholder="邮箱(必填,将保密)以便回复您" id="comment_email" name="email"
        maxlength="50" tabIndex="2" value="{$user.email ?? $touristInfo.email}" />
      <input class="comment_input comment_url" placeholder="网站或博客 http://xxxx" id="comment_url" name="website"
        maxlength="50" tabIndex="3" value="{$user.website ?? $touristInfo.website}" />
    </div>
    <div class="comment-box">
      <textarea placeholder="您的评论可以一针见血" name="comment-textarea" id="comment-textarea" class="comment-textarea"
        cols="100%" rows="3" tabIndex="4"></textarea>
      <div class="comment-ctrl">
        <span class="emotion sss"><img src="https://www.liangjucai.com/Index/images/face/5.png" width="20"
            height="20" />表情</span>
        <div class="comment-prompt"><i class="fa fa-spin fa-circle-o-notch"></i><span
            class="comment-prompt-text">评论正在提交中...请稍后</span></div>
        <div class="comment-success" id="comok"><i class="fa fa-check"></i><span
            class="comment-prompt-text">评论提交成功...</span></div>
        <div class="comment-success" id="cinfo"><i class="fa fa-close"></i><span class="comment-prompt-text"></span>
        </div>
        <button type="button" id="comment-submit" class="comment-submit">评论</button>
      </div>
    </div>
  </div>
</div>
<script>
  //点击回复按钮
  function reply($id, that, $st) {
    $("div[name='reply_model_this']").remove();
    $("#comment-submit").attr('onclick', 'comment(' + $id + ',this)');
    $html = '<div id="respond" name="reply_model_this">' + $("div[name='reply_model']").html() + '</div>';
    if ($st == 1) {
      $(that).parent().parent().parent().after($html);
    } else {
      $(that).parent().parent().parent().append($html);
    }
  }
</script>
{//回复按钮点击与添加评论框}
<script>
  //提交留言
  function comment($id, that) {
    $(that).parent().children(".comment-prompt").show();
    $(that).parent().children(".comment-success").hide();
    $.post("/comment",
      {
        nick: $(that).parent().parent().parent().children("div").children("input[name='nick']").val(),
        email: $(that).parent().parent().parent().children("div").children("input[name='email']").val(),
        website: $(that).parent().parent().parent().children("div").children("input[name='website']").val(),
        comment: $(that).parent().parent().children("textarea[name='comment-textarea']").val(),
        akey: "{$article.akey}",
        reply: $id,
      },
      function (data, status) {
        $(that).parent().children(".comment-prompt").hide();
        if (data.state == 'success') {
          $(that).parent().children("#comok").show();
          if ($id == '0') { //主評論模板
            $html = '<ol class="commentlist" id="coml_' + data.id + '"><li class="comment-content"><div class="comment-hf"><div><span class="comment-f">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div><a class="comm_hf_btn text-danger" data-id="' + data.id + '" onclick="recall(' + data.id + ',this)">撤回</a></div></div><div class="comment-avatar"><span class="avatar">' + data.nick.substring(0, 1) + '</span></div><div class="comment-main"><p><a href="#" target="_blank">' + data.nick + '</a><span class="time">(' + data.time + ')</span><br /><span class="useressay">' + data.essay + '</span></p></div></li></ol>';
            $("#postcomments").prepend($html);
            $(that).parent().parent().children("textarea[name='comment-textarea']").val('');
            $(that).parent().children(".comment-success").hide();
          } else {        //副評論模板
            $html = '<li class="comment-content comm_list w-94" id="coml_' + data.id + '"><div class="comment-hf"><div><span class="comment-f">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div><a class="comm_hf_btn text-danger" data-id="' + data.id + '" onclick="recall(' + data.id + ',this)">撤回</a></div></div><div class="comment-avatar"><span class="avatar">' + data.nick.substring(0, 1) + '</div><div class="comment-main"><p><a href="#" target="_blank">' + data.nick + '</a><span class="f-m-l">回复</span><a class="f-m-l" href="#" target="_blank">@ ' + data.retnick + '</a><span class="time">(' + data.time + ')</span><br /><span class="useressay">' + data.essay + '</span></p></div></li>';
            $("#colm_" + $id).parent().append($html);
            $(that).parent().parent().children("textarea[name='comment-textarea']").val('');
            $(that).parent().children(".comment-success").hide();
            $("div[name='reply_model_this']").remove();
          }
          replace_em(); //替换评论中的表情
        } else {
          $(that).parent().children("#cinfo").children("span").text(data.info);
          $(that).parent().children("#cinfo").show();
        }
      });
  }
  //撤回留言
  function recall($id, that) {
    if (confirm('确认撤回此条信息吗？两分钟之内可撤回') === true) {
      $.post("/comment/recall",
        {
          id: $id,
        },
        function (data, status) {
          if (data.state == 'success') {
            message.add(data.info, 'success');
            $("#coml_" + $id).remove();
          } else {
            message.add(data.info, 'error');
          }
        }).fail(function () {
          message.add('error响应，没有进入success', 'error');
        });
    } else {
      return 0;
    }
  }
</script>
{notempty name="isAdmin"}
<script>
  // 删除留言
  function json_comment_delete($id, that) {
    if (confirm('确认删除此留言吗？') === true) {
      $.post("/comment/delete",
        {
          id: $id,
        },
        function (data, status) {
          if (data.state == 'success') {
            message.add(data.info, 'success');
            $("#colm_" + $id).remove();
          } else {
            message.add(data.info, 'error');
          }
        }).fail(function () {
          message.add('error响应，没有进入success', 'error');
        });
    } else {
      return 0;
    }
  }
</script>
{/notempty}
<script>
  // 替换评论中的表情
  function replace_em() {
    $(".useressay").each(function (index, el) {
      $comment = $(this).html();
      $comment = $comment.replace(/\[em_([0-9]*)\]/g, '<img src="__MZBLOG__/images/arclist/$1.gif" border="0" />');
      $(this).html($comment);
    });
  }
  replace_em();
</script>